W systemie komputera sa zainstalowne liczne czciaki mozeliwe jest ze strona wykorzystuje czciake ktorej nie ma w systemie konkretnego komputera. Przegladarka podstawia wowczasstandartowa czciake dostepna w systemi ktora moze wygladac zupelnie inaczej niz planaowana. Tworzac strone warto zadbac o to by czciaka wyswietlana byla taka smaa lub przynajmniej zblizona do zaplanowajen CSS grupuje czciaki w/g okreslonych cech, a wiec podobnych do siebie, w grypach nazywanych rodzinami(family) Tych rodzin jest ich piec;
| Nazwa Rodzinny | Opis | Przykladowa czcionka |
| Serif | Czcionki szeregowe posiadaja dekoracje zakonczenia liter | Georgia , Bodoni , New Times Roman |
| sans-serif | bezszeryfowe; proste zakonczenia liter | Arial , Verdena, Futura |
| monospace | monotypiczne; stala szeroskosc znaku | Courier , Courier new |
| cursive | pochylone "pisma reczne" | Comic Sans MS , Florence |
| fantasy | dekoracyjne | Impact , OldTown |
W CSS podobnie jak w HTML istnieje 7 wielkosci czcionki predefiniowanej. Ponad to mozna uzywac jednostek bezwzglednych np.: mm, cm, in, pt, px... Styl wprowadzamy formula style="font-size:wartosc"
Wielkosci predyfiniowane to:
Mozliwe jest odowlanie do wielkosci aktualnej i wprowadzenie czcionki wiekszej lub mniejszej o jeden predefiniowany stopien. Ten akapit ma ustalona wielkosc na small. To jest fragment o stopien mniejszy smaller, a ten o stopien wiekszy larger
Kilka przykladow na wartosc bezwzględn±:
Styl czcionki to eq: pochylebue, Wprowadzamy przez font-style:warto¶ć. Mozliwe warto¶ci:
-normal
-italic -pochylona
-oblique - dzialabue jak italic.
Wariant czcionki pozwala na wybor pomiedzy normalnym wyglondem a kapitalikami, czyli wyswietlanie wielkich liter w rozmiarze malych liter
Przykłady:
Tekst Normalny
Tekst ze stylem font-variant:small-caps.
Grubosc czcionki realizowana w HTML znacznikiem <b> w CSS posiada deklaracje font-weight:wartosc Mozliwe wartosci to liczby od 100 do 900 z interwalem rownym 100 dajace coraz grubszy tekst. Wartosciami sa normal/bold ewentualnie lighter/bolder
Odstepy miedzy wieraszmi ustalamy deklaracja line-height:wartosc Wartosciami moga byc jednostki procetowe lub bezwzgledne (mm, cm, pt ,px, in.....) Ten akapit posiada odleglosci miedzy liniami o wielkosci 30px.
Mozna polaczyc wiele atrybutow w jednym wpisie. Wowczas po elemencie fotn stawiamy dwukropek(:) i wpisujemy wartosci odzielone spacjami (kolejnosc jest dowolna).Wyjatkiem jest odlaglosc miedzy liniamil wymaga poprzedzenia znakiem(/)
Formatowanie stylem font:italic small-caps bold 20px courier
selektor { color: kolor }
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli.
Natomiast jako "kolor" należy podać definicję koloru.
Przykład
selektor { text-decoration: dekoracja }
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli.
Natomiast jako "dekoracja" należy podać:
none - bez zmian
underline - podkreślenie
line-through - przekreślenie
overline - nadkreślenie
blink - migotanie tekstu (tylko Netscape/Mozilla/Firefox i Opera 7)
Polecenie umożliwia na wybór określonej dekoracji tekstu (np. podkreślenie). Migotanie może nie być interpretowane przez wszystkie przeglądarki!
selektor { text-transform: transformacja }
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli.
Natomiast jako "transformacja" należy podać:
none - bez zmian
capitalize - zamiana pierwszych liter wszystkich wyrazów na wielkie
uppercase - zamiana wszystkich liter na wielkie
lowercase - zamiana wszystkich liter na małe
Polecenie umożliwia na wybór określonej transformacji tekstu, czyli atrybutów dotyczących zmiany wielkości liter (wielkie/małe) w tekście.
selektor { text-align: wyrównanie }
Selektorem może być dowolny znacznik wyświetlany w bloku, np. p - akapit, h1 - tytuł czy td - komórka tabeli.
Natomiast jako "wyrównanie" należy podać:
left - wyrównanie tekstu do lewego marginesu (domyślnie)
right - wyrównanie do prawego marginesu
center - do środka (wyśrodkowanie)
justify - do obu marginesów jednocześnie (justowanie)
Polecenie pozwala wybrać jeden z możliwych sposobów wyrównania tekstu, czyli jego ułożenia na ekranie.
selektor { text-indent: wcięcie }
Selektorem może być każdy znacznik wyświetlany w bloku.
Natomiast jako "wcięcie" należy podać konkretną wielkość wcięcia, używając jednostek długości.
Wcięcie w tekście oznacza dodatkowy odstęp pierwszej linijki w bloku od lewego marginesu (jak tabulator). Stosuje się je, gdy rozpoczynamy nowy akapit (na inny temat).
selektor { text-shadow: poziom pion rozmycie kolor,... }
Wartości "poziom pion rozmycie kolor" określają własności cienia (wartości "rozmycie" oraz "kolor" nie są wymagane):
poziom - przesunięcie cienia w prawo (ujemne wartości przesuwają w lewo)
pion - przesunięcie cienia w dół (ujemne wartości przesuwają w górę)
rozmycie - promień efektu rozmycia (opcjonalnie)
kolor - kolor bazowy efektu (opcjonalnie - jeśli go nie podamy, przyjmie kolor taki, jak sam element)
Wartości "poziom", "pion" oraz "rozmycie" należy podać, używając jednostek długości.
selektor { line-height: odstęp }
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli.
Natomiast jako "odstęp" należy podać konkretną wielkość odstępu między liniami bazowymi wierszy używając jednostek długości. Wpisanie "normal" przywróci wartość domyślną.
selektor { word-spacing: odstęp }
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli.
Natomiast jako "odstęp" należy podać konkretną wielkość odstępu między poszczególnymi wyrazami używając jednostek długości. Wpisanie "normal" przywróci wartość domyślną.
selektor { letter-spacing: odstęp }
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli.
Natomiast jako "odstęp" należy podać konkretną wielkość odstępu między poszczególnymi literami używając jednostek długości. Wpisanie "normal" przywróci wartość domyślną.
selektor { white-space: sposób }
Selektorem może być każdy znacznik wyświetlany w bloku [zobacz: Wstawianie stylów].
Natomiast jako "sposób" należy podać:
normal - zamiana kilku sąsiadujących ze sobą spacji na jedną; wiersze są przełamywane automatycznie na końcu szerokości strony (domyślnie)
pre - umożliwia wyświetlenie wielu spacji obok siebie; wiersze są przełamywane po napotkaniu znaku nowej linii - klawisz Enter (tekst preformatowany)
nowrap - tryb identyczny jak "normal" z tym, że nie pozwala na przełamanie wiersza (przejście do następnej linii), aż do napotkania znacznika
pre-wrap - (CSS 2.1) pozwala wyświetlić kilka sąsiadujących spacji; wiersze są przełamywane po napotkaniu znaku nowej linii - klawisz Enter - oraz automatycznie na końcu szerokości strony (Opera 7.5, Firefox 3, Chrome, Konqueror)
pre-line - (CSS 2.1) jak wyżej z tym, że sąsiadujące spacje są zamieniane na jedną
Daniel Zygmunt 2c